<template>
  <div class="root">
    <el-card class="card" id="csscard"
      ><div class="title">WEB元素工坊</div>
      <h3 class="intro">快速生成自定义风格组件</h3></el-card
    >

    <button @click="enter">先去逛逛</button>
    <button @click="gologin">登录注册</button>
    <!-- <button @click="enter">使用指南-></button> -->
  </div>
</template>

<script>
import axios from "axios";
axios.defaults.baseURL = "http://localhost:8082"

export default {
  methods: {
    enter() {
      window.localStorage.setItem('curname','未登录用户')
      //为了让未登录用户可以正常使用权限内功能不跳转至登录页面
      window.localStorage.setItem('未登录用户','unlogin')
      this.$router.push({ path: "/mybutton" });
    },
    gologin() {
      this.$router.push({ path: "/login" });
    },
  },
};
</script>

<style scoped>
.root {
  width: 100%;
  height: 650px;
  display: flex;
  flex-direction: column;
  background-image: url("../assets/bg1.png");
  background-size: cover;
  background-repeat: no-repeat;
}
.title {
  font-size: 40px;
  font-weight: bold;
  margin: 30px;
  color: aliceblue;
}
.intro {
  margin: 0px 40px 30px;
  color: aliceblue;
}
button {
  border-radius: 20px;
  margin: 13px 80px;
  border: none;
  font-weight: bold;
  font-size: 15px;
  padding: 6px;
  width: 10%;
  height: 40px;
  outline: none;
  box-shadow: 4px 4px 13px #401360;
  background-color: #c888f6;
  color: #2b0338;
}
.card {
  background-color: rgba(108, 80, 137, 0.3);
  background: rgba(108, 80, 137, 0.3);
  width: 30%;
  margin: 40px;
  color: azure;
}
</style>